﻿@page "/forms/range"

<Pager Title="Range" Description="Use our custom range inputs for consistent cross-browser styling and built-in customization."
Indicates="@(new[]{"Overview","Diabled","Min and max","Steps"})">
	<Demo Title="Overview">
		<Description>
		      <code>FormInputRange</code> component only support the <code>int long float short decimal double</code> type for binding.
		</Description>
		<Run>
			<Form Model="this">
				<FormLabel For="()=>Value">Example range</FormLabel>
				<FormInputRange @bind-Value="Value"/>
				@Value
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormLabel For=""()=>Value"">Example range</FormLabel>
<FormInputRange @bind-Value=""Value""/>
```
			")
		</Code>
	</Demo>
	<Demo Title="Disabled">
		<Description>
		      Add the <code>Disabled</code> parameter on an input to give it a grayed out appearance and remove pointer events.
		</Description>
		<Run>
			<Form Model="this">
				<FormLabel For="()=>Value">Example range</FormLabel>
				<FormInputRange @bind-Value="Value" Disabled/>
				@Value
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormLabel For=""()=>Value"">Example range</FormLabel>
<FormInputRange @bind-Value=""Value"" Disabled/>
```
			")
		</Code>
	</Demo>
		<Demo Title="Min and max">
		<Description>
			Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.
		</Description>
		<Run>			
			<Form Model="this">
				<FormLabel For="()=>Value">Example range</FormLabel>
				<FormInputRange @bind-Value="Value" Min="20" Max="60"/>
				@Value
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormLabel For=""()=>Value"">Example range</FormLabel>
<FormInputRange @bind-Value=""Value"" Min=""20"" Max=""60""/>
```
			")
		</Code>
	</Demo>
	<Demo Title="Steps">
		<Description>
			By default, range inputs “snap” to integer values. To change this, you can specify a step value. 
		</Description>
		<Run>			
			<Form Model="this">
				<FormLabel For="()=>Value">Example range</FormLabel>
				<FormInputRange @bind-Value="Value" Min="20" Max="60" Step="10"/>
				@Value
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormLabel For=""()=>Value"">Example range</FormLabel>
<FormInputRange @bind-Value=""Value"" Min=""20"" Max=""60"" Step=""10""/>
```
			")
		</Code>
	</Demo>
</Pager>
@code{
	int Value { get; set; } = 45;
}